<script setup lang="ts">
import InterviewTypeDoughnut from "@/components/common/InterviewTypeDoughnut.vue";
import {storeToRefs} from "pinia";
import appStore from "@/store";
import {FormInstance, FormRules} from "element-plus";
import {OfficeBuilding, Briefcase, UserFilled, DocumentChecked, InfoFilled} from "@element-plus/icons-vue";
import {random} from "lodash";

const {interviewNewStore} = storeToRefs(appStore.useInterviewJsonStore);
const ruleFormRef = ref<FormInstance>();

// Animation state
const fadeIn = ref(false);

onMounted(() => {
  setTimeout(() => {
    fadeIn.value = true;
  }, 100);
});

const rules = reactive<FormRules<any>>({
  company: [{
    required: true,
    message: '请输入应聘公司！',
    validator: (rule: any, value: any, callback: any) => {
      if (!interviewNewStore.value.Settings.company || interviewNewStore.value.Settings.company === '') {
        return callback(new Error('请输入应聘公司名称'));
      }
      callback();
    },
    trigger: ['blur']
  }],
  post: [{
    required: true,
    message: '请输入应聘岗位！',
    validator: (rule: any, value: any, callback: any) => {
      if (!interviewNewStore.value.Settings.post || interviewNewStore.value.Settings.post === '') {
        return callback(new Error('请输入应聘岗位名称'));
      }
      callback();
    },
    trigger: ['blur']
  }],
  interviewType: [{
    required: true,
    validator: (rule: any, value: any, callback: any) => {
      if (!interviewNewStore.value.Settings.interviewType) {
        return callback(new Error('请选择面试类型'));
      }
      callback();
    }
  }],
});

// Interview type options with descriptions
const interviewTypes = [
  {
    value: '能力面试',
    label: '能力面试',
    description: '重点考察综合能力和软技能',
    color: '#409eff'
  },
  {
    value: '项目面试',
    label: '项目面试',
    description: '深入了解项目经验和实践能力',
    color: '#67c23a'
  },
  {
    value: '技术面试',
    label: '技术面试',
    description: '专业技术知识和编程能力测试',
    color: '#e6a23c'
  },
  {
    value: '综合面试',
    label: '综合面试',
    description: '全方位评估候选人综合素质',
    color: '#f56c6c'
  },
  {
    value: 'HR面试',
    label: 'HR面试',
    description: '文化匹配度和职业规划评估',
    color: '#909399'
  }
];

const interviewLength = ref([
  {
    value: random(20, 30, false),
    label: '短',
    color: '#909399',
    description: '约10~15回合'
  },
  {
    value: random(30, 40, false),
    label: '中等',
    color: '#67c23a',
    description: '约15~20回合'

  },
  {
    value: random(40, 60, false),
    label: '长',
    color: '#e6a23c',
    description: '约20~30回合'
  }
])

const refreshLength = () => {
  interviewLength.value[0].value = random(10, 15, false)
  interviewLength.value[1].value = random(15, 25, false)
  interviewLength.value[2].value = random(25, 40, false)
}

// Form completion status
const formCompletion = computed(() => {
  let completed = 0;
  let total = 4;

  if (interviewNewStore.value.Settings.company) completed++;
  if (interviewNewStore.value.Settings.post) completed++;
  if (interviewNewStore.value.Settings.interviewType) completed++;
  if (interviewNewStore.value.Settings.requirement) completed++;

  return {
    percentage: Math.round((completed / total) * 100),
    completed,
    total
  };
});

// Get selected interview type info
const selectedTypeInfo = computed(() => {
  return interviewTypes.find(type => type.value === interviewNewStore.value.Settings.interviewType);
});
</script>

<template>
  <div class="requirement-settings-container" :class="{ 'fade-in': fadeIn }">
    <!-- Header Section -->
    <div class="settings-header">
      <div class="header-content">
        <div class="header-left">
          <h2 class="section-title">
            <el-icon class="title-icon">
              <DocumentChecked/>
            </el-icon>
            需求设置
          </h2>
          <p class="section-description">配置面试基本信息和岗位要求</p>
        </div>
        <div class="header-right">
          <div class="completion-indicator">
            <div class="completion-circle" :style="{ '--progress': formCompletion.percentage + '%' }">
              <span class="completion-text">{{ formCompletion.percentage }}%</span>
            </div>
            <div class="completion-info">
              <span class="completion-label">完成度</span>
              <span class="completion-detail">{{ formCompletion.completed }}/{{ formCompletion.total }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Form Content -->
    <div class="form-container">
      <el-form
          label-width="auto"
          v-model="interviewNewStore.Settings"
          ref="ruleFormRef"
          :rules="rules"
          class="requirement-form"
          label-position="top"
      >
        <!-- Basic Information Section -->
        <div class="form-section">
          <div class="section-header">
            <h3 class="section-subtitle">
              <el-icon>
                <InfoFilled/>
              </el-icon>
              基本信息
            </h3>
          </div>

          <el-row :gutter="24">
            <el-col :span="12">
              <el-form-item label="应聘公司" prop="company" class="form-item">
                <div class="input-wrapper">
                  <el-icon class="input-icon">
                    <OfficeBuilding/>
                  </el-icon>
                  <el-input
                      v-model="interviewNewStore.Settings.company"
                      placeholder="请输入公司名称"
                      class="custom-input"
                      clearable
                  />
                </div>
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="应聘岗位" prop="post" class="form-item">
                <div class="input-wrapper">
                  <el-icon class="input-icon">
                    <Briefcase/>
                  </el-icon>
                  <el-input
                      v-model="interviewNewStore.Settings.post"
                      placeholder="请输入岗位名称"
                      class="custom-input"
                      clearable
                  />
                </div>
              </el-form-item>
            </el-col>
          </el-row>
        </div>

        <!-- Interview Configuration Section -->
        <div class="form-section">
          <div class="section-header">
            <h3 class="section-subtitle">
              <el-icon>
                <UserFilled/>
              </el-icon>
              面试配置
            </h3>
          </div>

          <el-row :gutter="24">
            <el-col :span="12">
              <el-form-item label="面试时长" prop="minDialogueRounds" class="form-item">
                <el-select
                    v-model="interviewNewStore.Settings.minDialogueRounds"
                    class="custom-select"
                    default-first-option
                >
                  <el-option
                      v-for="type in interviewLength"
                      :key="type.value"
                      :label="type.label"
                      :value="type.value"
                      class="custom-option"
                  >
                    <div class="option-content">
                      <div class="option-header">
                        <span class="option-dot" :style="{ backgroundColor: type.color }"></span>
                        <span class="option-label">{{ type.label }}</span>
                      </div>
                      <div class="option-description">{{ type.description }}</div>
                    </div>
                  </el-option>
                </el-select>
              </el-form-item>

              <!-- Interview Type Selection -->
              <el-form-item label="面试类型" prop="interviewType" class="form-item">
                <el-select
                    v-model="interviewNewStore.Settings.interviewType"
                    placeholder="请选择面试类型"
                    class="custom-select"
                    clearable
                >
                  <el-option
                      v-for="type in interviewTypes"
                      :key="type.value"
                      :label="type.label"
                      :value="type.value"
                      class="custom-option"
                  >
                    <div class="option-content">
                      <div class="option-header">
                        <span class="option-dot" :style="{ backgroundColor: type.color }"></span>
                        <span class="option-label">{{ type.label }}</span>
                      </div>
                      <div class="option-description">{{ type.description }}</div>
                    </div>
                  </el-option>
                </el-select>
              </el-form-item>

              <!-- Selected Type Info -->
              <div v-if="selectedTypeInfo" class="type-info-card">
                <div class="type-info-header">
                  <span class="type-dot" :style="{ backgroundColor: selectedTypeInfo.color }"></span>
                  <span class="type-name">{{ selectedTypeInfo.label }}</span>
                </div>
                <p class="type-description">{{ selectedTypeInfo.description }}</p>
              </div>

              <!-- Requirements Textarea -->
              <el-form-item label="岗位要求" prop="requirement" class="form-item requirements-item">
                <el-input
                    v-model="interviewNewStore.Settings.requirement"
                    type="textarea"
                    resize="none"
                    :rows="5"
                    placeholder="请输入详细的岗位要求和职责描述..."
                    class="custom-textarea"
                    show-word-limit
                    maxlength="2000"
                />
              </el-form-item>

            </el-col>

            <el-col :span="12">
              <!-- Chart Section -->
              <div class="chart-section">
                <div class="chart-header">
                  <h4 class="chart-title">面试类型分布</h4>
                  <p class="chart-description">查看不同面试类型的特点和重点</p>
                </div>
                <div class="chart-container">
                  <interview-type-doughnut/>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-form>
    </div>
  </div>
</template>

<style lang="scss" scoped>
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap');

.requirement-settings-container {
  font-family: 'Noto Sans SC', sans-serif;
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);

  &.fade-in {
    opacity: 1;
    transform: translateY(0);
  }
}

.settings-header {
  margin-bottom: 30px;
  padding-bottom: 20px;
  border-bottom: 2px solid #f0f2f5;

  .header-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;

    .header-left {
      flex: 1;

      .section-title {
        display: flex;
        align-items: center;
        gap: 12px;
        font-size: 24px;
        font-weight: 700;
        color: #2c3e50;
        margin: 0 0 8px;

        .title-icon {
          font-size: 28px;
          color: #409eff;
        }
      }

      .section-description {
        font-size: 16px;
        color: #64748b;
        margin: 0;
        line-height: 1.5;
      }
    }

    .header-right {
      .completion-indicator {
        display: flex;
        align-items: center;
        gap: 15px;

        .completion-circle {
          position: relative;
          width: 60px;
          height: 60px;
          border-radius: 50%;
          background: conic-gradient(#409eff 0% var(--progress), #e5e7eb var(--progress) 100%);
          display: flex;
          align-items: center;
          justify-content: center;

          &::before {
            content: '';
            position: absolute;
            width: 44px;
            height: 44px;
            border-radius: 50%;
            background: white;
          }

          .completion-text {
            position: relative;
            font-size: 12px;
            font-weight: 700;
            color: #409eff;
            z-index: 1;
          }
        }

        .completion-info {
          display: flex;
          flex-direction: column;
          gap: 2px;

          .completion-label {
            font-size: 14px;
            color: #64748b;
            font-weight: 500;
          }

          .completion-detail {
            font-size: 16px;
            color: #2c3e50;
            font-weight: 600;
          }
        }
      }
    }
  }
}

.form-container {
  .requirement-form {
    .form-section {
      background: #ffffff;
      border-radius: 12px;
      padding: 25px;
      margin-bottom: 25px;
      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
      border: 1px solid #e5e7eb;
      transition: all 0.3s ease;

      &:hover {
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
        border-color: #d1d5db;
      }

      .section-header {
        margin-bottom: 20px;

        .section-subtitle {
          display: flex;
          align-items: center;
          gap: 8px;
          font-size: 18px;
          font-weight: 600;
          color: #374151;
          margin: 0;

          .el-icon {
            font-size: 20px;
            color: #409eff;
          }
        }
      }

      .form-item {
        margin-bottom: 20px;

        :deep(.el-form-item__label) {
          font-weight: 600;
          color: #374151;
          font-size: 14px;
          margin-bottom: 8px;
        }

        .input-wrapper {
          position: relative;

          .input-icon {
            position: absolute;
            left: 12px;
            top: 50%;
            transform: translateY(-50%);
            color: #9ca3af;
            font-size: 16px;
            z-index: 1;
          }

          .custom-input {
            :deep(.el-input__inner) {
              padding-left: 40px;
              height: 44px;
              border-radius: 8px;
              font-size: 14px;
              transition: all 0.3s ease;

              &:focus {
                border-color: #409eff;
                box-shadow: 0 0 0 3px rgba(64, 158, 255, 0.1);
              }

              &:hover {
                border-color: #d1d5db;
              }
            }
          }
        }

        &.requirements-item {
          .custom-textarea {
            :deep(.el-textarea__inner) {
              border-radius: 8px;
              border: 2px solid #e5e7eb;
              font-size: 14px;
              line-height: 1.6;
              padding: 12px;
              font-family: 'Noto Sans SC', sans-serif;
              transition: all 0.3s ease;

              &:focus {
                border-color: #409eff;
                box-shadow: 0 0 0 3px rgba(64, 158, 255, 0.1);
              }

              &:hover {
                border-color: #d1d5db;
              }
            }
          }
        }
      }

      .custom-select {
        width: 100%;

        :deep(.el-select__wrapper) {
          height: 44px;
          border-radius: 8px;
          border: 2px solid #e5e7eb;
          transition: all 0.3s ease;

          &:hover {
            border-color: #d1d5db;
          }

          &.is-focused {
            border-color: #409eff;
            box-shadow: 0 0 0 3px rgba(64, 158, 255, 0.1);
          }
        }

        :deep(.el-select__placeholder) {
          color: #9ca3af;
          font-size: 14px;
        }
      }
    }
  }
}

.custom-option {
  :deep(.el-select-dropdown__item) {
    height: auto;
    padding: 12px 16px;
    line-height: 1.4;

    &:hover {
      background-color: #f8fafc;
    }

    &.is-selected {
      background-color: #eff6ff;
      color: #1d4ed8;
    }
  }

  .option-content {
    .option-header {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 4px;

      .option-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
      }

      .option-label {
        font-weight: 600;
        font-size: 14px;
        color: #374151;
      }
    }

    .option-description {
      font-size: 12px;
      color: #6b7280;
      margin: 0;
      padding-left: 16px;
    }
  }
}

.type-info-card {
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 20px;

  .type-info-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;

    .type-dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
    }

    .type-name {
      font-weight: 600;
      font-size: 14px;
      color: #374151;
    }
  }

  .type-description {
    font-size: 13px;
    color: #6b7280;
    margin: 0;
    line-height: 1.5;
  }
}

.chart-section {
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  border-radius: 12px;
  padding: 20px;
  height: 100%;
  min-height: 400px;
  display: flex;
  flex-direction: column;

  .chart-header {
    margin-bottom: 20px;

    .chart-title {
      font-size: 16px;
      font-weight: 600;
      color: #374151;
      margin: 0 0 6px;
    }

    .chart-description {
      font-size: 13px;
      color: #6b7280;
      margin: 0;
    }
  }

  .chart-container {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

// Responsive Design
@media (max-width: 1024px) {
  .settings-header {
    .header-content {
      flex-direction: column;
      gap: 20px;

      .header-right {
        align-self: flex-start;
      }
    }
  }

  .form-container {
    .requirement-form {
      .form-section {
        padding: 20px;

        .el-row {
          .el-col {
            &:first-child {
              margin-bottom: 20px;
            }
          }
        }
      }
    }
  }
}

@media (max-width: 768px) {
  .settings-header {
    .header-content {
      .header-left {
        .section-title {
          font-size: 20px;

          .title-icon {
            font-size: 24px;
          }
        }

        .section-description {
          font-size: 14px;
        }
      }

      .header-right {
        .completion-indicator {
          .completion-circle {
            width: 50px;
            height: 50px;

            &::before {
              width: 36px;
              height: 36px;
            }

            .completion-text {
              font-size: 10px;
            }
          }
        }
      }
    }
  }

  .form-container {
    .requirement-form {
      .form-section {
        padding: 15px;
        margin-bottom: 20px;

        .section-header {
          .section-subtitle {
            font-size: 16px;
          }
        }

        .form-item {
          .input-wrapper {
            .custom-input {
              :deep(.el-input__inner) {
                height: 40px;
                padding-left: 36px;
              }
            }

            .input-icon {
              font-size: 14px;
              left: 10px;
            }
          }
        }
      }
    }
  }

  .chart-section {
    min-height: 300px;
    padding: 15px;
  }
}
</style>